<template title="请求参数-返回参数">
    <el-table
            :data="data"
            style="width: 100%;margin-top: 30px"
            border
            default-expand-all
            row-key="key"
            :tree-props="{children: 'parameters'}">
        <el-table-column
                prop="name"
                label="参数名称"
                width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="dataType"
                label="数据类型" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>
                    <div  v-if="scope.row.extendDescr!=null && scope.row.extendDescr.length>0">
                        <el-popover trigger="hover" placement="top">
                            <div
                                    v-for="x in scope.row.extendDescr">
                                <p>{{x}}</p>
                            </div>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.dataType }}</el-tag>
                            </div>
                        </el-popover>
                    </div>
                    <div v-else>
                        <p>{{ scope.row.dataType}}</p>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column
                prop="required"
                label="是否必须" show-overflow-tooltip>
            <template slot-scope="scope">
                {{scope.row.required+''}}
            </template>
        </el-table-column>
        <el-table-column
                prop="defaultValue"
                label="默认值" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="group"
                label="传参类型" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tag
                        :key="params(scope.row.paramType).label"
                        :type="params(scope.row.paramType).type"
                        effect="dark">
                    {{ params(scope.row.paramType).label }}
                </el-tag>
            </template>

        </el-table-column>
        <el-table-column
                prop="example"
                label="示例" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="value"
                label="备注" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述" show-overflow-tooltip>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        props: {
            tableData: {
                type: Array
            }
        },
        data() {
            return {
                data: [],
                param: {
                    DEFAULT: {type: '', label: 'Query'},
                    QUERY: {type: '', label: 'Query'},
                    PATH: {type: 'info', label: 'Path'},
                    BODY: {type: 'success', label: 'Body'},
                    FORM: {type: 'warning', label: 'Format'},
                    FORM_DATA: {type: 'danger', label: 'FormatData'}
                }
            };
        },
        methods:{
            params(name){
               return this.param[name.toUpperCase()];
            }
        },
        mounted() {
            this.data = this.tableData.flatMap((x) => x.parameters);
        },
    }
</script>

<style scoped>
    ::v-deep table {
        margin: 0px;
    }
</style>
